import React, {Component} from 'react';

import {Tree, Row, Col, Button, Input, PageHeader, Breadcrumb, message, Modal, Form} from 'antd';
import axios from "@src/lib/axios";

import {
    ExclamationCircleOutlined,

} from "@ant-design/icons";



const {TreeNode} = Tree;
const { confirm } = Modal;



export default class Area extends Component {
    constructor(props) {
        super(props);

        this.state = {
            visible: false,
            params: {
                title: ""
            },
            parentNode: "",
            confirmLoading: false,
            treeData: []
        };
        this.addForm = React.createRef();
    }



    fetchData = () => {
        axios.post('common/area_list', {}).then(res => {
            if (res.code === 0) {
                let areaList = res.data;
                this.setState({treeData: areaList});
            } else {
                message.warning("没有数据");
            }
        });
    };

    // 在render方法执行前被调用
    UNSAFE_componentWillMount() {
        this.fetchData();
    }

    //todo 删除地区 提示confirm
    delShowModal = (parent, data, i) => {
        let {id} = data
        console.log(id);
        let that = this;
        confirm({
            title: '你是否确认删除该地区',
            icon: <ExclamationCircleOutlined/>,
            content: '如果该地区已经被业务数据使用,删除会失败...',
            onOk() {
                axios.post("/platform/area/del",{id:id}).then(res=>{
                    if (res.code === 0) {
                        message.success(res.msg);
                        that.fetchData();
                    }else{
                        message.warning(res.msg);
                    }
                })
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    };
    //todo 添加地区 弹出表单输入地区名称
    addShowModal = (parent, data, index) => {
        this.setState({
            visible: true,
            pid: data.id
        });
    };

    //todo 添加地区
    handleOk = () => {
        let data = this.addForm.current.getFieldsValue();
        Object.assign(data, {pid: this.state.pid});
        axios.post("/platform/area/add", data).then(res => {
            if (res.code === 0) {
                message.success(res.msg);
                this.addForm.current.resetFields();
                this.setState({visible: false});
                this.fetchData();

            } else {
                message.warning(res.msg);
            }
        });
    };

    //todo 删除地区
    del = (id) => {

    };

    onEditPre = (data, k, value) => {
        Object.assign(data, {[k]: value});
        this.setState({});
    };


    onBlurHandler = (id, newvalue) => {

        // Object.assign(data, { [ k ]: value });
        axios.post('/platform/area/update', {id: id, title: newvalue}).then(res => {
            if (res.code === 0) {
                this.fetchData();
                message.success(res.msg);
            } else {
                message.warning(res.msg);
            }
        });
        // this.setState({});
    };

    handleCancel = () => {
        this.addForm.current.resetFields();
        this.setState({visible: false})

    };


    render() {
        const {treeData, confirmLoading} = this.state;

        const treeBtn = (parent, data, index) => (
            <Row>
                <Col span={12} align="left">
                    {
                        data.showEdit ?
                            <Input defaultValue={data.title}
                                   onBlur={(e) => this.onBlurHandler(data.id, e.target.value)}/> :
                            data.title
                    }
                </Col>
                <Col span={12} align="right">
                    <Button type="link" size="small" onClick={() => this.onEditPre(data, 'showEdit', true)}>编辑</Button>
                    <Button type="link" size="small"
                            onClick={() => this.addShowModal(parent, data, index)}>添加下级地区</Button>
                    <Button type="link" size="small" onClick={() => this.delShowModal(parent, data, index)}>删除</Button>
                </Col>
            </Row>
        );
        const renderTreeNodes = data => data.map((item, index) => {
            const {title, ...arg} = item;
            const children = item.children;
            if (children) {
                return (
                    <TreeNode title={treeBtn(data, item, index)} {...arg} dataRef={item}>
                        {renderTreeNodes(children)}
                    </TreeNode>
                );
            }
            return <TreeNode title={treeBtn(data, item, index)} {...arg} dataRef={item}/>;
        });

        return (
            <div style={{padding: "0 15px 100px 15px", background: "#fff"}}>
                <Modal
                    title="Title"
                    visible={this.state.visible}
                    maskClosable
                    maskStyle={{backgroundColor: 'rgba(0,0,0,.15)'}}
                    onOk={this.handleOk}
                    confirmLoading={confirmLoading}
                    onCancel={this.handleCancel}
                >
                    <Form
                        ref={this.addForm}>
                        <Form.Item
                            label="地区名称"
                            name="title"
                            rules={[
                                {required: true, message: "请填写地区名称!"}
                            ]}
                        >
                            <Input placeholder="请输入地区名称"/>
                        </Form.Item>

                    </Form>
                </Modal>
                <div style={{padding: "10px 0px 1px 0px"}}>
                    <Breadcrumb>
                        <Breadcrumb.Item>配置管理</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <a href="">区域列表</a>
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <PageHeader
                    className="site-page-header"
                    title="区域信息列表"
                    subTitle="输入完毕点击回车即可保存"
                />
                <Tree>
                    {renderTreeNodes(treeData)}
                </Tree>
            </div>
        )
    }
}
